<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Gaz Tests</title>
    <script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>
    <script type="text/javascript" src="jquery/fx.js"></script>
    <script type="text/javascript" src="jquery/fx.highlight.js"></script>
    <script type="text/javascript" src="../src/gaz.lite.js"></script>
    <script type="text/javascript" src="../src/gaz.treestore.js"></script>
    <script type="text/javascript" src="../src/gaz.treeview.js"></script>
    
    <script type="text/javascript">//<![CDATA[
    $(function() {    
        // Yes, that is all that is required to get a basic tree and two view.
        var store = Gaz.TreeStore('id', 'parentId');
        $("#table1 .tree-data").gazTreeView(store, {
            columns:  ['parentId', 'data']
        });
        $("#table2 .tree-data").gazTreeView(store, {
            columns:  ['parentId', 'data'],
            sortHeaders: {headers: "#table2 .sortable th", pattern: "sort-on-"} 
        });
        
        // But we add a little color by coloring clicked rows in the right
        // treeview and hilighting modified rows in the left one (just to
        // demonstrate events.)
        $("#table2 .tree-data").gazTreeView().bind('click', null, function(evt, treeview, elts) {
            treeview.rowElements(evt.target).toggleClass("yellow");
        });
        $("#table1 .tree-data").gazTreeView().bind('after-redraw', null, function(evt, treeview, elts) {
            $(elts).effect('highlight', {}, 1500);
        });
        
        // This is the code that creates new nodes.
        var serial = 1;
        $("#button-create").click(function(evt) {
            var n = $("input[@name=n]").val();
            var p = parseFloat($("input[@name=p]").val());
            var nodes = new Array(n);
            for (n -= 1 ; n >= 0 ; n--) {
                var pid = null;
                if (serial > 5 && Math.random() <= p)
                    pid = Math.ceil(Math.random() * serial);
                if (pid == serial) pid -= 1;
                nodes[n] = {id: serial++, parentId: pid, data: "Lorem ipsum ... I hate this stuff!"};
            }
            // This can be used to get the view or the store if we didn't
            // save them into variables before.
            $("#table2 .tree-data").gazTreeView().store.load(nodes);
        });
        
        // Freeze and thaw of the store (to test events.)
        $("#button-freeze").click(function(evt) { store.stopEvents(); });
        $("#button-thaw").click(function(evt) { store.startEvents(); });
        $("#button-empty").click(function(evt) { store.empty(); serial = 1; });
        $("#button-redraw").click(function(evt) {
            $("#table1 .tree-data").gazTreeView().redraw();
            $("#table2 .tree-data").gazTreeView().redraw();
        });
    });
    //]]></script>
    
    <link rel="stylesheet" type="text/css" href="example.css" />
</head>
<body>
    <h1>Gaz Example</h1>
    
    <p>This is a very simple example for the gaz treestore/treeview classes. Two independent views
    are created from the same store to demonstrate that using the MVC paradigm without 150
    classes of Java code is possible. The form below can be used to dinamically create nodes
    and adding them to the store and the view will be updated accordingly. Also, the right view uses
    'click' delegation to hilight clicked rows in yellow without binding an event to every single
    element in the table while the left one uses the custom 'after-redraw' event to hilight all
    rows that were redrawn by the current update.</p>
    
    <div id="controls">
        <form action="">
            <div class="fields">
                Number of nodes <input name="n" value="10" />
                Parent probability <input name="p" value="0.95"/>
            </div>
            <div class="buttons">
                <button type="button" id="button-create">Create nodes</button>
                <button type="button" id="button-freeze">Freeze store (stop events)</button>
                <button type="button" id="button-thaw">Thaw store (play frozen events)</button>
                <button type="button" id="button-empty">Empty store</button>
                <button type="button" id="button-redraw">Redraw both trees</button>
            </div>
        </form>
    </div>
    
    <div id="tables">
        <div class="table-viewport">
            <table id="table1">
            <thead><tr>
                <th>Node Id</th>
                <th>Orig Parent Id</th>
                <th>Some data</th>
            </tr></thead>
            <tbody class="tree-data"><tr><td>No Content Yet!</td></tr></tbody>
            </table>
        </div>    
        <div class="table-viewport">
            <table id="table2">
            <thead class="sortable"><tr>
                <th class="sort-on-id">Node Id</th>
                <th class="sort-on-parentId">Orig Parent Id</th>
                <th class="sort-on-data">Some data</th>
            </tr></thead>
            <tbody class="tree-data"><tr><td>No Content Yet!</td></tr></tbody>
            </table>
        </div>
    </div>
</body>
</html>
